<!--  -->
<template>
  <div class="all-night-layout">
    <el-card class="box-card">
      <el-button
        type="primary"
        style="display: flex; margin-bottom: 1rem"
        @click="centerDialogVisible = true"
        icon="el-icon-plus"
        >添加分类</el-button
      >
      <el-dialog
        title="提示"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <span>需要注意的是内容是默认不居中的</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <div class="header">
        <zk-table
          style="font-size: 14px; border-radius: 5px;" 
          ref="table"
          :data="data1"
          :columns="columns"
          :stripe="props.stripe"
          :border="props.border"
          :show-header="props.showHeader"
          :show-summary="props.showSummary"
          :show-row-hover="props.showRowHover"
          :show-index="props.showIndex"
          :tree-type="props.treeType"
          :is-fold="props.isFold"
          :expand-type="props.expandType"
          :selection-type="props.selectionType"
          sum-text="sum"
          index-text="#"
        >
          <!-- 是否有效 列 -->
          <!-- slot 绑定的是当前列模板的名称 -->
          <template slot="effective" slot-scope="scope">
            <i
              class="el-icon-success"
              v-if="scope.row.effective === true"
              style="color: lightgreen"
            ></i>
            <i class="el-icon-error" v-else style="color: red"></i>
          </template>
          <!-- 排序 列 -->
          <template slot="level" slot-scope="scope">
            <el-tag size="mini" v-if="scope.row.level === 0">一级</el-tag>
            <el-tag type="success" size="mini" v-else-if="scope.row.level === 1"
              >二级</el-tag
            >
            <el-tag type="warning" size="mini" v-else>三级</el-tag>
          </template>
          <template slot="action" slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="handleDelete(scope.$index, scope.row)"
              >添加</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </zk-table>
      </div>
      <div class="cont"></div>
      <div class="footer"></div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "cateGory",
  data() {
    return {
      centerDialogVisible: false,
      props: {
        stripe: false,
        border: true,
        showHeader: true,
        showSummary: false,
        showRowHover: true,
        showIndex: false, //展示索引头
        treeType: true,
        isFold: true,
        expandType: false,
        selectionType: false,
      },
      data1: [], //table-tree总数据
      //columns(设置表格中列配置信息)
      columns: [
        { label: "分类名称", align: "left", prop: "name", tree: true },
        {
          label: "是否生效",
          align: "left",
          type: "template",
          // 表示当前这一列使用的模板名称
          template: "effective",
        },
        {
          label: "排序",
          align: "left",
          type: "template",
          // 表示当前这一列使用的模板名称
          template: "level",
        },
        {
          label: "操作",
          align: "left",
          prop: "action",
          template: "action",
          type: "template",
          width: "220px",
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.GetCategory();
  },
  methods: {
    // 数据接口调用
    GetCategory() {
      axios
        .get("/product/category")
        .then(({ data: res }) => {
          console.log(res)
          if (res.status === 200) {
            this.data1 = res.CategoryList;
          }
        })
        .catch(function (error) {
          // 处理错误情况
          console.log(error);
          this.$message.error("错了哦，这是一条错误消息");
        });
    },
    pre_edit(e) {
      this.$message.success("编辑");
    },
    del(e) {
      this.$message.success("删除");
    },
    pre_add(e) {
      this.$message.success("添加");
    },
  },
};
</script>
<style lang='scss' scoped>
.box-card {
  height: 100%;
  margin-top: 1rem;
}
</style>